<template>
    <div :class="`shop-bag-tag ${isSingle ? 'single' : ''} ${mode}`" @click="gotoShopBag">
        <div class="count" v-if="bagProductLength > 0">{{bagProductLength}}</div>
        <MiniIcon name="bag" theme="#333333" size="26" />
        <div class="bag-name title-color">购物袋</div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { MiniIcon } from '@components/base';
import { redirectTo } from '@common/utils';
import ModeMixin from '@common/mixin';
export default {
    name: 'Bag', // 购物袋标识
    mixins: [ModeMixin],
    components: {
        MiniIcon,
    },
    props: {
        isSingle: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        ...mapState({
            bagProductLength: state => state.shopBag.bagProductLength,
        }),
    },
    methods: {
        gotoShopBag() {
            redirectTo('shop/bag');
        },
    },
};
</script>

<style lang="less">
.shop-bag-tag {
    &.single {
        position: fixed;
        bottom: 20px;
        right: @gap;
        width: 64px;
        height: 64px;
        background-color: @white;
        box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.08);
        border: 1px solid rgba(125,125,131,0.1);
        border-radius: 64px;
        .flex-column-center();
        z-index: 1000;
        &.black {
            background: #121212;
            box-shadow: 0px 4px 16px 0px rgba(51, 51, 51, 0.12);
            border: 1px solid rgba(125, 125, 131, 0.2);
            .mini-icon {
                color: @black-title-color !important;
            }
        }
        .bag-name {
            font-size: @font-size-mini;
        }
        .count {
            position: absolute;
            left: 2px;
            top: 2px;
            min-width: 14px;
            .p-h(1);
            height: 14px;
            background: rgba(254,59,48,1);
            box-shadow: 0px 1px 2px 0px rgba(254,59,48,0.2);
            border-radius: 8px;
            font-size: @font-size-mini;
            .t-c();
            color: @white;
        }
    }
}
</style>
